<template>
    <view class="container paddingBottomBar" v-if="OrderDetail">
        <header-bar :config="config"></header-bar>
        <view class="order-main" id="pagePoster">
            <view class="order-item product-item">
                <view class="title-text title-text-flex">
                    <view>基础信息</view>
                </view>
                <view class="">
                    <view class="order-price">
                        <view class="price-items">
                            <view class="price-item">
                                <text class="label">商户名称</text>
                                <text class="value">{{ BusinessName }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">单据类型</text>
                                <text class="value">实物订货</text>
                            </view>
                            <view class="price-item">
                                <text class="label">开单时间</text>
                                <text class="value">{{ OrderDetail.AddTime }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label">单据金额</text>
                                <text class="value">￥{{ OrderDetail.ProductPrice.toFixed(2) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="order-item product-item">
                <view style="font-size: 30rpx; font-weight: bold; text-align: center;">{{ BusinessName }}</view>
                <!-- <view style="text-align: center;font-size: 22rpx; border-bottom: #979797 solid 1px; margin: 20rpx 0; padding-bottom: 10rpx; word-break: break-all;
    word-wrap: break-word;">
                    地址：{{
                        OrderDetail.Address }} 电话：{{
                        OrderDetail.ContactTel }}</view> -->
                <view style="font-size: 30rpx; font-weight: bold; text-align: center;">送货单</view>
                <view class="">
                    <view class="order-price">
                        <view class="price-items">
                            <view class="price-item">
                                <text class="label" style="font-size: 22rpx;">客户名称</text>
                                <text class="value" style="font-size: 22rpx;">{{ OrderDetail.StoreName ?
                                    OrderDetail.StoreName :
                                    OrderDetail.RealName }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label" style="font-size: 22rpx;">订单编号</text>
                                <text class="value" style="font-size: 22rpx;">{{ OrderDetail.Sn }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label" style="font-size: 22rpx;">收货地址</text>
                                <text class="value" style="font-size: 22rpx;">{{ OrderDetail.Address }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label" style="font-size: 22rpx;">报价时间</text>
                                <text class="value" style="font-size: 22rpx;">{{ OrderDetail.AddTime }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label" style="font-size: 22rpx;">联系人</text>
                                <text class="value" style="font-size: 22rpx;">{{ OrderDetail.OrderContactTel }}</text>
                            </view>
                            <view class="price-item">
                                <text class="label" style="font-size: 22rpx;">业务员</text>
                                <text class="value" style="font-size: 22rpx;">{{ OrderDetail.WorkerName }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="table">
                    <view class="table-head">
                        <view style="width: 50rpx;padding-left: 10rpx;">序号</view>
                        <!-- <view style="width: 180rpx;">商品名称</view> -->
                        <view style="width: 200rpx;padding-left: 10rpx;">商品规格</view>
                        <view style="padding-left: 10rpx; width: 110rpx;">单价</view>
                        <view style="width: 120rpx; padding-left: 10rpx;">数量</view>
                        <view style="padding-left: 10rpx; padding-right: 10rpx; flex: 1; text-align: right;">小计</view>
                    </view>
                    <view class="table-tr" v-for="(item, index) in DetailList" :key="index">
                        <view style="width: 50rpx;padding-left: 10rpx;">{{ index + 1 }}</view>
                        <!-- <view style="width: 180rpx;">{{ item.Name }}</view> -->
                        <view style="width: 200rpx;padding-left: 10rpx;">{{ item.Attribute }}</view>
                        <view style="padding-left: 10rpx; width: 110rpx;">{{ item.Price }}</view>
                        <view style="width: 120rpx;padding-left: 10rpx;">{{ item.Amount }}</view>
                        <view style="padding-left: 10rpx; padding-right: 10rpx; flex: 1; text-align: right;">{{
                            (item.Price *
                                item.Amount).toFixed(2) }}</view>
                    </view>
                    <view
                        style="font-size: 22rpx; text-align: right; border-bottom: #E5E6EB solid 1px; padding-bottom: 20rpx; font-weight: 500;">
                        商品合计：{{ OrderDetail.ProductPrice.toFixed(2) }}元，运费：{{ OrderDetail.PostagePrice.toFixed(2)
                        }}元，合计：{{ (OrderDetail.ProductPrice + OrderDetail.PostagePrice).toFixed(2)
                        }}元
                    </view>
                    <!-- <view style="display: flex; padding: 20rpx 10rpx;border-bottom: #E5E6EB solid 1px;">
                        <view style="flex: 1; font-size: 22rpx; margin-right: 20rpx;">
                            <view style="margin-bottom: 10rpx;">客户备注：产品创造于工厂，而品牌创造于心灵</view>
                            <view>订单备注：灵感是业余者的专属，我们专业人士只要在早上打卡上班即可</view>
                        </view>
                        <view style="width: 80px;">
                            <u-qrcode ref="uqrcode" canvas-id="qr" :value="text" :size="size"
                                style="margin: 0 auto;"></u-qrcode>
                        </view>
                    </view> -->
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <button class="btn btn-nullify" @click="saveBase64Image('document.png')">下载单据</button>
            <!-- <button class="btn btn-nullify" @click="goOrderDetail">查看订单</button> -->
            <!-- <button class="btn btn-main">逛商城</button> -->
        </view>
    </view>
</template>

<!-- <script module="text" lang="renderjs"> -->
<script>
import html2canvas from 'html2canvas'
import { mapMutations } from "vuex"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetOrderDetail, OrderCancel, GetOrderInfoByNumber } from "@/service/api/order.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        easyProImage,
    },
    data() {
        return {
            text: "",
            size: 80,
            config: {
                title: "单据详情",
                centerSlot: true,
                rightSlot: false,
                // color: ["#ffffff"],
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            infoData: {},
            showImgs: [],
            imgs: [],
            itemname: "", //单个商品显示名称
            orderId: 0,
            OrderDetail: null,
            DetailList: [],
            isShowCancel: false,
            isShowCollection: false,
            isShowConfirm: false,
            isShowReceipt: false,
            remark: "",
            deliveryImgs: [],
            posterUrl: "",
            BusinessName: "",
        }
    },
    created() {
        //
    },
    onLoad(e) {
        this.orderId = e.orderId
        let url = "https://zcshop.zcbz.vip/admin-app/#/pages/order/share?orderId=" + this.orderId
        this.text = url
    },
    mounted() {

    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
    },
    onShow() {
        this.getData()
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        saveBase64Image(fileName) {
            setTimeout(() => {
                const dom = document.getElementById('pagePoster') // 需要生成图片内容的 dom 节点
                html2canvas(dom, {
                    width: dom.offsetWidth, //dom 原始宽度
                    height: dom.outerHeight,
                    scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                    scrollX: 0,
                    useCORS: true, //支持跨域
                    // scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
                }).then((canvas) => {
                    // 生成成功
                    console.log("生成成功")
                    // html2canvas 生成成功的图片链接需要转成 base64位的url
                    // ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
                    this.posterUrl = canvas.toDataURL('image/png')
                    if (typeof plus !== "undefined") {
                        this.makeDownLoadImg(this.posterUrl)
                    } else {
                        // 将base64格式的图片转换成Blob对象
                        var arr = this.posterUrl.split(','),
                            mime = arr[0].match(/:(.*?);/)[1],
                            bstr = atob(arr[1]),
                            n = bstr.length,
                            u8arr = new Uint8Array(n);
                        while (n--) {
                            u8arr[n] = bstr.charCodeAt(n);
                        }
                        var blob = new Blob([u8arr], { type: mime });

                        // 创建一个下载链接
                        var a = document.createElement('a');
                        a.download = fileName; // 设置下载文件名
                        a.href = URL.createObjectURL(blob); // 将Blob对象转换为URL
                        console.log(URL.createObjectURL(blob))
                        a.style.display = 'none'; // 隐藏下载链接
                        document.body.appendChild(a); // 将下载链接添加到文档中

                        // 模拟点击下载链接
                        a.click();

                        // 清理
                        URL.revokeObjectURL(a.href); // 释放URL对象
                        document.body.removeChild(a); // 移除下载链接
                    }


                    // var imgUrl = URL.createObjectURL(blob);
                    // console.log(imgUrl)
                    // var timestamp = (new Date()).valueOf();
                    // var down = plus.downloader.createDownload(imgUrl, {
                    //     method: 'GET',
                    //     filename: '_downloads/image/' + timestamp + '.png'
                    // }, function (e, a) {
                    //     console.log("plus===", e.filename);
                    //     plus.gallery.save(e.filename, function (e) {
                    //         uni.showToast({
                    //             title: "保存成功",
                    //             mask: true,
                    //         });
                    //         console.log("下载成功");
                    //     }, function (e) {
                    //         console.log(e.message)
                    //         console.log("下载失败,请重试111");
                    //     })
                    // });
                    // down.start();

                    // var byte = this.posterUrl.replace("data:image/png;base64,", "");
                    // const fs = uni.getFileSystemManager(); //全局唯一的文件管理器
                    // var timestamp = (new Date()).valueOf();
                    // fs.writeFile({
                    //     filePath: '_downloads/image/' + timestamp + '.png',
                    //     data: byte,
                    //     encoding: "base64",
                    //     success(res) {
                    //         uni.saveImageToPhotosAlbum({ //保存为png格式到相册
                    //             filePath: wx.env.USER_DATA_PATH + '/code' + number + '.png',
                    //             success: function (res) {
                    //                 uni.showToast({ title: "下载成功", icon: "success" });
                    //             },
                    //             fail: function (err) {
                    //                 console.log("err", err)
                    //             }
                    //         })
                    //     }
                    // })

                }).catch(err => {
                    console.log(err);
                    console.log("生成图片失败");
                })
            }, 300)
        },
        makeDownLoadImg(base64) {
            const bitmap = new plus.nativeObj.Bitmap("test");
            bitmap.loadBase64Data(base64, function () {
                const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
                console.log('saveHeadImgFile', url)
                bitmap.save(url, {
                    overwrite: true,  // 是否覆盖
                    // quality: 'quality'  // 图片清晰度
                }, (i) => {
                    plus.gallery.save(i.target, function () {
                        uni.showToast({
                            title: '图片保存至相册成功',
                            icon: 'none'
                        })
                        bitmap.clear()
                    },
                        function (e) {
                            uni.showToast({
                                title: '图片保存至相册失败:' + JSON.stringify(e),
                                icon: 'none'
                            })
                            bitmap.clear()
                        },
                    );
                    // uni.saveImageToPhotosAlbum({
                    //     filePath: url,
                    //     success: function () {
                    //         uni.showToast({
                    //             title: '图片保存成功',
                    //             icon: 'none'
                    //         })
                    //         bitmap.clear()
                    //     }
                    // });
                }, (e) => {
                    uni.showToast({
                        title: '图片保存失败',
                        icon: 'none'
                    })
                    bitmap.clear()
                });
            }, (e) => {
                uni.showToast({
                    title: '图片保存失败',
                    icon: 'none'
                })
                bitmap.clear()
            });
        },
        getData() {
            let param = {}
            let path = "?orderId=" + this.orderId
            GetOrderDetail(param, path).then((res) => {
                if (res.State == 1) {
                    this.BusinessName = res.Data.BusinessName
                    this.infoData = res.Data
                    this.OrderDetail = res.Data.OrderDetail
                    this.DetailList = this.OrderDetail.DetailList
                    this.isShowCancel =
                        this.OrderDetail.State == 0 || this.OrderDetail.State == 7 || this.OrderDetail.State == 8
                    let payMoney = this.OrderDetail.ProductPrice + this.OrderDetail.PostagePrice
                    this.isShowCollection =
                        this.OrderDetail.State == 0 ||
                        (this.OrderDetail.State == 2 && this.OrderDetail.ArrearsPrice > 0) ||
                        (this.OrderDetail.State == 10 && this.OrderDetail.ArrearsPrice > 0) ||
                        (this.OrderDetail.State == 6 && this.OrderDetail.ArrearsPrice > 0) ||
                        (this.OrderDetail.State == 15 && this.OrderDetail.ArrearsPrice > 0)

                    // let ArrearsPrice = this.OrderDetail.ArrearsPrice
                    // let PriceSum = this.OrderDetail.PriceSum

                    // let state =0 //0未付款 1已付款 2部分付款
                    // if(ArrearsPrice==0){
                    // 	state = 1
                    // }else if(ArrearsPrice<PriceSum){
                    // 	state = 2
                    // }else{

                    // }
                    let employeeTake = storage.getCache("employeeTake")
                    if (employeeTake && employeeTake == 1) {
                        this.isShowReceipt =
                            this.OrderDetail.State == 6 ||
                            (this.OrderDetail.State == 15 && this.OrderDetail.PayWay == 11)
                    } else {
                        this.isShowReceipt = false
                    }
                    // this.getImageList(this.DetailList)
                    if (this.OrderDetail.State == 6 || this.OrderDetail.State == 10) {
                        // this.GetOrderImg()
                    }
                } else {
                    this.easyToast(res.Msg)
                }
            })
        }
    },
}
</script>

<style lang="scss">
.bottom-bar {
    display: flex;
    justify-content: flex-end;

    .btn {
        margin: 0 0 0 24rpx;
        min-width: 192rpx;
        height: 76rpx;
        background: #ffffff;
        border-radius: 48rpx;
        border: 1rpx solid $app-color-main;
        font-size: 32rpx;
        color: $app-color-main;
    }

    .btn-nullify {
        border-color: #999999;
        color: $color-gray-2;
    }
}

.padding-item {
    padding: 14rpx 0 $app-page-padding;
}

.remark-item {
    margin-top: 20rpx;
}

.order-header {
    height: 300rpx;
    background: $app-color-main;
}

.order-main {
    padding: 0 $app-page-padding $app-page-padding;
    margin-top: 20rpx;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .satus {
                font-weight: 700;
                font-size: $font-size-36;
                color: $color-white;
            }
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-main;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: #333;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }

    .order-item {
        background: $color-white;
        margin-bottom: 24rpx;
        // background: red;
    }

    .product-item {
        padding: $app-page-padding;
        border-radius: 16rpx;

        .title-text {
            display: flex;
            font-weight: 700;
            padding-bottom: 24rpx;
            border-bottom: 1rpx solid #ebebeb;
            margin-bottom: 24rpx;
            font-size: 28rpx;
        }

        .title-text-flex {
            justify-content: space-between;
            align-items: center;
        }

        .title-text-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .title-text-desc {
            font-size: $font-size-24;
            color: $color-gray-2;
            padding-right: 12rpx;
            font-weight: normal;
        }
    }

    .product-item-line {
        .title-text {
            border-bottom: none;
            margin-bottom: 0rpx;
        }
    }

    .order-item-main {
        display: flex;
        flex: 1;
        flex-direction: row;
    }

    .order-item-imgs {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;

        .img-item {
            position: relative;
            margin-right: 24rpx;
            display: flex;
            align-items: center;

            .order-item-name {
                flex: 1;
                font-size: 28rpx;
                color: $color-gray-1;
                display: flex;
                align-items: center;
                padding-left: 14rpx;
            }

            .order-item-img {
                display: flex;
                width: 120rpx;
                height: 120rpx;
                // border: 1px solid $app-color-main;
                border-radius: 8rpx;
            }

            .text-num {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 40rpx;
                border-bottom-left-radius: 10rpx;
                border-bottom-right-radius: 10rpx;
                color: $color-white;
                background: rgba($color-black, 0.3);
                font-size: $font-size-24;
            }
        }
    }

    .right-box {
        display: flex;
        flex-direction: row;
        align-items: center;

        .num-box {
            display: flex;
            flex-direction: column;
            margin-right: 16rpx;

            text {
                margin-bottom: 4rpx;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .order-price {
        .price-items {
            padding-bottom: 14rpx;

            .price-item {
                padding: 10rpx 0;
                display: flex;
                flex-direction: row;

                .label {
                    display: flex;
                    flex: 1;
                    font-size: 26rpx;
                    color: $color-gray-1;
                }

                .value {
                    font-size: 26rpx;
                    color: $color-gray-1;
                    font-weight: bold;
                }
            }
        }
    }

    .pay-price {
        border-top: 1rpx solid #ebebeb;
        padding: 28rpx 0rpx 4rpx 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .pay-price-title {
        font-size: 26rpx;
        color: #333333;
    }

    .await-pay-price-text {
        padding-left: 24rpx;

        text {
            color: $app-color-main;
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    .takeuser {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 56rpx;
        line-height: 56rpx;
        margin-bottom: 10rpx;

        .takeuser-name,
        .takeuser-tel {
            font-size: 26rpx;
            color: $color-gray-1;
            margin-right: 5rpx;
        }

        .takeuser-tel {
            font-weight: bold;
            margin-right: 10rpx;
        }

        .bluetel {
            color: #4070ff;
            margin-left: 10rpx;
        }

        .icon-order-tel {
            width: 40rpx;
            height: 40rpx;
            background-image: url(@/static/icon/icon_order_tel.png);
        }
    }

    .takeaddress {
        font-size: 24rpx;
        color: $color-gray-3;
        padding-bottom: 10rpx;
    }

    .remark {
        background: #f7f7f7;

        .remark-main {
            border-bottom: 1rpx solid #ebebeb;

            .remark-time {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: $color-gray-1;
                padding: 24rpx 24rpx 20rpx 24rpx;

                view {
                    font-size: $font-size-28;
                }

                text {
                    font-size: $font-size-24;
                    color: $color-gray-3;
                }
            }

            .remark-desc {
                color: $color-gray-1;
                font-size: $font-size-24;
                padding: 24rpx 24rpx 20rpx 24rpx;
                word-break: break-all;
                min-height: 80rpx;
            }
        }

        & .remark-main:last-child {
            border: none;
        }
    }
}

.imglist {
    display: flex;
    flex-wrap: wrap;

    image {
        width: 140rpx;
        height: 140rpx;
        margin: 0rpx 10rpx 10rpx 0rpx;
    }
}

.table {
    .table-head {
        display: flex;
        background-color: #E5E6EB;
        height: 80rpx;
        line-height: 80rpx;
        margin-bottom: 20rpx;

        view {
            font-size: 22rpx;
        }
    }

    .table-tr {
        display: flex;
        margin-bottom: 20rpx;
        padding-bottom: 10rpx;
        border-bottom: #E5E6EB solid 1px;

        view {
            font-size: 22rpx;
        }
    }
}
</style>
